<template lang="html">
<div>
    <div class="page-head article-head semibold">
      <img @click="goBack()" class="back" src="4_icon_back.png"></img>
    </div>
    <div class="page-main page-article content-frame">
        <div class="header semibold">{{data.title}}</div>
        <div class="author clearfix"><img class="avatar" :src="data.author.avatar ? data.author.avatar : '50_50.png'">
        <div class="author-name semibold">{{data.author.name}}</div>
        <div class="sub">{{new Date(Number(data.update_at.toString()+'000')).getFullYear()}}-{{new Date(Number(data.update_at.toString()+'000')).getMonth() + 1}}-{{new Date(Number(data.update_at.toString()+'000')).getDate()}}</div>
        </div>
        <div class="comment-main">
            <div class="comment-title semibold">全部评论({{data.comments.length}}条)</div>
            <div class="comment-list">
                <div class="comment-single" v-for="comment in data.comments">
                    <div class="comment-single-head">
                        <span class="comment-single-username">{{comment.user ? comment.user.name : ''}}</span>
                        <span class="comment-single-time">{{getDate(comment.update_at).getFullYear()}}-{{getDate(comment.update_at).getMonth() + 1}}-{{getDate(comment.update_at).getDate()}} {{getDate(comment.update_at).getHours()}}:{{getDate(comment.update_at).getMinutes()}}</span>
                        <div class="comment-single-content">{{comment.content}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<style lang="postcss">
.content-frame{
    position: absolute;
    width: 3.45rem;
    height: 100%;
    background-color: #fff;
    margin: 0;
}
.comment-main{
    margin-top: 0.1rem;
    .comment-title{
        font-size: 0.15rem;
    }
    .comment-list{
        .comment-single{
            padding: 0.05rem 0;
            border-bottom: 0.01rem solid #eaeaea;
            .comment-single-username{
                font-weight: bold;
                padding-left: 0.01rem;
            }
            .comment-single-time{
                float: right;
                padding-right: 0.05rem;
                font-size: 0.13rem;
                color: #A5A5A5;
            }
            .comment-single-content{
                font-size: 0.14rem;
            }
        }
    }
}
</style>
<script>
export default {
  data: function(){
    return {
      data: {
          title: '加载中',
          author: {
              name: '加载中',
              avatar: '50_50.png'
          },
          update_at: Math.ceil((new Date()).getTime()/1000),
          comments: [],
      }
    }
  },
  computed: {
      like_14: function(){
          return this.liked ? '14_like2.png' : '14_like.png';
      },
      id: function(){
          var pathArr =this.$route.path.split('/');
          return pathArr[3]
      }
  },
  components: {
      'list': require("../components/List")
  },
  mounted: function() {
                this.$http.get('/posts/'+this.id+'/comments')
                .then((response) => {
                    if(response.data.code == 1){
                        var msg = response.data.msg;
                        this.data = msg;
                    }else{
                        alert(response.data.msg);
                    }
                })
                .catch((err) => {
                    alert(err);
                });
  },
  methods: {
      getDate(timestamp){
          return new Date(Number(timestamp.toString()+'000'));
      },
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    },
    like () {
        if(this.liked){
            this.liked = false;
            this.likes -= 1;
        }else{
            this.liked = true;
            this.likes += 1;
        }
    }
  }
}
</script>